<%--
  Created by IntelliJ IDEA.
  User: guobenqi
  Date: 2021/5/29
  Time: 17:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员登录界面</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        function deleteStudent(id){
            if (confirm("您确定要删除吗?")){
                location.href = "${pageContext.request.contextPath}/deleteStudentById?id="+id;
            }

        }

        $(function () {
            $(".addStuBtn").click(function () {
                location.href = "${pageContext.request.contextPath}/add.jsp"
            });

            $("#deleteSelected").click(function () {
                let cbs = document.getElementsByName("ids");
                let flag = false;
                //判断是否有选中条目

                for (let i = 0; i < cbs.length; i++) {
                    if(cbs[i].checked){
                        //有一个条目选中了
                        flag = true;
                        break;
                    }
                }
                if (!flag){
                    alert("请选择条目")
                }else{
                    if(confirm("您确定要删除选中条目吗？")){


                        if(flag){//有条目被选中
                            //表单提交
                            document.getElementById("form3").submit();
                        }

                    }
                }

            })

            <%--$("#teacherManage").click(function () {--%>
            <%--    location.href= "${pageContext.request.contextPath}/findAllTeacher";--%>

            <%--})--%>
            $("#addBtn2").click(function () {
                location.href = "${pageContext.request.contextPath}/addTeacher.jsp"

            })
            $("#update").click(function () {
                location.href="${pageContext.request.contextPath}/updatePassword.jsp"

            })

            $("#log-out").click(function () {
                location.href="${pageContext.request.contextPath}/logout";

            })



        })
    </script>

</head>
<body>
<div id="wrap">
    <div class="leftMeun" id="leftMeun">
        <div id="logoDiv">
            <p id="logoP">
                <span id="log-out">退出登录</span>
            </p>
        </div>

        <div class="meun-title">菜单</div>
        <div class="meun-item meun-item-active" href="#user" aria-controls="user" role="tab" data-toggle="tab">学生管理</div>
        <div class="meun-item " href="#teacher" aria-controls="teacher" role="tab" data-toggle="tab" id="teacherManage">教师管理</div>
        <div class="meun-item" href="#chan" aria-controls="chan" role="tab" data-toggle="tab" id="update">修改密码</div>

    </div>

    <div id="rightContent" class="rightlll">
        <a class="toggle-btn" id="nimei">
            <i class="glyphicon glyphicon-align-justify"></i>
        </a>

        <div class="tab-content" >
            <div style="position: absolute;right: 20px;top: 10px;font-size: 20px;color: #262b8a;z-index: 999">${ pageContext.getSession().getAttribute("user").getUsername()},欢迎登陆</div>
            <!--学生面板-->
            <div role="tabpanel" class="tab-pane active" id="user" >
                <div class="check-div" style="text-align: center;font-size: 40px;position: relative;background: #985f0d;color: #761c19">
                    学生信息
                </div>




                    <div style="position: absolute;left: 230px;top: 30px;z-index: 999">
                        <form class="form-inline" action="${pageContext.request.contextPath}/findStudentByPage" method="post">
                            <div class="form-group">
                                <label for="exampleInputName2" style="font-size: 20px">班级</label>
                                <select type="text" name="cId"  class="form-control" id="exampleInputName2" >
                                    <option value=''>--请选择--</option>
                                    <option value=1>软工一班</option>
                                    <option value=2>软工二班</option>
                                    <option value=3>软工三班</option>
                                    <option value=4>软工四班</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputName3" style="font-size: 20px">学号</label>
                                <input type="text" name="username"  class="form-control" id="exampleInputName3" >
                            </div>
                            <button type="submit" class="btn btn-default">查询</button>
                        </form>
                    </div>

                    <div style="position:absolute; right: 200px; top: 30px">
                        <button class="btn btn-success btn-xs addStuBtn" id="addBtn" data-toggle="modal" data-target="#reviseUser" style="width: 80px;height: 40px;font-size: 20px">添加</button>
                        <button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteUser"
                                style="width: 120px;height: 40px;font-size: 20px" id="deleteSelected">批量删除</button>
                    </div>

                <form action="${pageContext.request.contextPath}/deleteSelectedStudent" method="post" id="form3">
                    <div class="data-div">
                        <div class="row tableHeader">
                            <div class="col-xs-1">
                               请选择
                            </div>
                            <div class="col-xs-1">
                                序号
                            </div>
                            <div class="col-lg-2 ">
                                学号
                            </div>
                            <div class="col-xs-1">
                                姓名
                            </div>
                            <div class="col-xs-1">
                                班级
                            </div>
                            <div class="col-lg-1">
                                性别
                            </div>

                            <div class="col-xs-1">
                                年龄
                            </div>
                            <div class="col-xs-1">
                               民族
                            </div>
                            <div class="col-xs-1">
                                居住地
                            </div>
                            <div class="col-xs-2">
                                操作
                            </div>
                        </div>

                        <c:forEach items="${students.list}" var="student" varStatus="s">
                            <div class="tablebody" style="font-size: 18px;color:#69842e ">
                            <div class="row">
                                <div class="col-xs-1 ">
                                    <input type="checkbox" name="ids" value="${student.id}">
                                </div>
                                <div class="col-xs-1">
                                    ${s.count}
                                </div>
                                <div class="col-lg-2 ">
                                    ${student.username}
                                </div>
                                <div class="col-xs-1">
                                   ${student.sName}
                                </div>
                                <div class="col-xs-1">
                                   ${student.cName}
                                </div>
                                <div class="col-xs-1">
                                   ${student.sSex}
                                </div>
                                <div class="col-xs-1">
                                    ${student.sAge}
                                </div>
                                <div class="col-xs-1">
                                        ${student.sNation}
                                </div>
                                <div class="col-xs-1">
                                        ${student.sAddress}
                                </div>
                                <div class="col-xs-2">
                                    <a href="${pageContext.request.contextPath}/findStudentById?id=${student.id}">
                                        <div class="btn btn-success btn-group-sm updateBtn" data-toggle="modal" data-target="#reviseUser"  >修改</div>
                                    </a>
                                    <a href="javascript:deleteStudent(${student.id});">
                                        <div class="btn btn-danger btn-group-sm" data-toggle="modal" data-target="#deleteUser" >删除</div>
                                    </a>
    <%--                                <button class="btn btn-warning btn-xs" data-toggle="modal" data-target="#deleteUser">查看详细信息</button>--%>
                                </div>
                            </div>
                        </div>
                        </c:forEach>
                    </div>

                </form>
                <!--分页器-->
                <div style="position: absolute;left: 220px;bottom: 50px">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <c:if test="${students.currentPage == 1}">
                            <li class="disabled">
                                </c:if>

                                <c:if test="${students.currentPage != 1}">
                            <li>
                                </c:if>


                                <a href="${pageContext.request.contextPath}/findStudentByPage?currentPage=${students.currentPage - 1 < 1 ? 1 : students.currentPage - 1 }&rows=5&username=${condition.username[0]}&cId=${condition.cId[0]}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>


                            <c:forEach begin="1" end="${students.totalPage}" var="i" >


                                <c:if test="${students.currentPage == i}">
                                    <li class="active"><a href="${pageContext.request.contextPath}/findStudentByPage?currentPage=${i}&rows=5&username=${condition.username[0]}&cId=${condition.cId[0]}">${i}</a></li>
                                </c:if>
                                <c:if test="${students.currentPage != i}">
                                    <li><a href="${pageContext.request.contextPath}/findStudentByPage?currentPage=${i}&rows=5&username=${condition.username[0]}&cId=${condition.cId[0]}">${i}</a></li>
                                </c:if>

                            </c:forEach>


                            <li>
                                <a href="${pageContext.request.contextPath}/findStudentByPage?currentPage=${students.currentPage + 1 > students.totalPage ? students.currentPage :students.currentPage + 1 }&rows=5&username=${condition.username[0]}&cId=${condition.cId[0]}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <span style="font-size: 25px;margin-left: 5px;">
                    共${students.totalCount}条记录，共${students.totalPage}页
                </span>

                        </ul>
                    </nav>


                </div>
            </div>

            <!--教师面板-->
            <div role="tabpanel" class="tab-pane" id="teacher">
                <div class="check-div" style="text-align: center;font-size: 40px">
                    教师信息
                </div>


                <div style="position: absolute;left: 230px;top: 30px;z-index: 999">
<%--                    <form class="form-inline" action="${pageContext.request.contextPath}/findStudentByPage" method="post">--%>
<%--                        <div class="form-group">--%>
<%--                            <label for="exampleInputName2" style="font-size: 20px">班级</label>--%>
<%--                            <select type="text" name="cId"  class="form-control" id="exampleInputName2" >--%>
<%--                                <option value=''>--请选择--</option>--%>
<%--                                <option value=1>软工一班</option>--%>
<%--                                <option value=2>软工二班</option>--%>
<%--                                <option value=3>软工三班</option>--%>
<%--                                <option value=4>软工四班</option>--%>
<%--                            </select>--%>
<%--                        </div>--%>
<%--                        <div class="form-group">--%>
<%--                            <label for="exampleInputName3" style="font-size: 20px">班主任姓名</label>--%>
<%--                            <input type="text" name="teachername"  class="form-control" id="exampleInputName3" >--%>
<%--                        </div>--%>
<%--                        <button type="submit" class="btn btn-default">查询</button>--%>
<%--                    </form>--%>
                </div>

                <div style="position:absolute; right: 200px; top: 30px">
                    <button class="btn btn-success btn-xs addStuBtn" id="addBtn2" data-toggle="modal" data-target="#reviseUser"
                            style="width: 80px;height: 40px;font-size: 20px">添加</button>
                </div>

                <form action="${pageContext.request.contextPath}/deleteSelectedStudent" method="post" id="form">
                    <div class="data-div">
                        <div class="row tableHeader">
                            <div class="col-xs-1">
                                序号
                            </div>
                            <div class="col-lg-1 ">
                                姓名
                            </div>
                            <div class="col-xs-2">
                                邮箱
                            </div>
                            <div class="col-xs-1">
                                电话
                            </div>
                            <div class="col-lg-1">
                               年龄
                            </div>

                            <div class="col-xs-2">
                               毕业院校
                            </div>
                            <div class="col-xs-1">
                                班级
                            </div>
                            <div class="col-xs-2">
                                操作
                            </div>
                        </div>

                        <c:forEach items="${teacherList}" var="teacher" varStatus="t">
                            <div class="tablebody" style="font-size: 18px;color:#69842e ">
                                <div class="row">
                                    <div class="col-xs-1">
                                            ${t.count}
                                    </div>
                                    <div class="col-lg-1 ">
                                            ${teacher.tName}
                                    </div>
                                    <div class="col-xs-2">
                                            ${teacher.tEmail}
                                    </div>
                                    <div class="col-xs-1">
                                            ${teacher.tPhone}
                                    </div>
                                    <div class="col-xs-1">
                                            ${teacher.tAge}
                                    </div>
                                    <div class="col-xs-2">
                                            ${teacher.tGraduate}
                                    </div>
                                    <div class="col-xs-1">
                                            ${teacher.cName}
                                    </div>
                                    <div class="col-xs-2">
                                        <a href="${pageContext.request.contextPath}/findStudentById?id=${student.id}">
                                            <button class="btn btn-success btn-group-sm updateBtn" data-toggle="modal" data-target="#reviseUser"  >修改</button>
                                        </a>
                                            <%--                                <button class="btn btn-warning btn-xs" data-toggle="modal" data-target="#deleteUser">查看详细信息</button>--%>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </div>

                </form>
<%--                <!--分页器-->--%>
<%--                <div style="position: absolute;left: 220px;bottom: 50px">--%>
<%--                    <nav aria-label="Page navigation">--%>
<%--                        <ul class="pagination">--%>
<%--                            <c:if test="${students.currentPage == 1}">--%>
<%--                            <li class="disabled">--%>
<%--                                </c:if>--%>

<%--                                <c:if test="${students.currentPage != 1}">--%>
<%--                            <li>--%>
<%--                                </c:if>--%>


<%--                                <a href="${pageContext.request.contextPath}/findStudentByPage?currentPage=${students.currentPage - 1 < 1 ? 1 : students.currentPage - 1 }&rows=5&username=${condition.username[0]}&cId=${condition.cId[0]}" aria-label="Previous">--%>
<%--                                    <span aria-hidden="true">&laquo;</span>--%>
<%--                                </a>--%>
<%--                            </li>--%>


<%--                            <c:forEach begin="1" end="${students.totalPage}" var="i" >--%>


<%--                                <c:if test="${students.currentPage == i}">--%>
<%--                                    <li class="active"><a href="${pageContext.request.contextPath}/findStudentByPage?currentPage=${i}&rows=5&username=${condition.username[0]}&cId=${condition.cId[0]}">${i}</a></li>--%>
<%--                                </c:if>--%>
<%--                                <c:if test="${students.currentPage != i}">--%>
<%--                                    <li><a href="${pageContext.request.contextPath}/findStudentByPage?currentPage=${i}&rows=5&username=${condition.username[0]}&cId=${condition.cId[0]}">${i}</a></li>--%>
<%--                                </c:if>--%>

<%--                            </c:forEach>--%>


<%--                            <li>--%>
<%--                                <a href="${pageContext.request.contextPath}/findStudentByPage?currentPage=${students.currentPage + 1 > students.totalPage ? students.currentPage :students.currentPage + 1 }&rows=5&username=${condition.username[0]}&cId=${condition.cId[0]}" aria-label="Next">--%>
<%--                                    <span aria-hidden="true">&raquo;</span>--%>
<%--                                </a>--%>
<%--                            </li>--%>
<%--                            <span style="font-size: 25px;margin-left: 5px;">--%>
<%--                    共${students.totalCount}条记录，共${students.totalPage}页--%>
<%--                </span>--%>

<%--                        </ul>--%>
<%--                    </nav>--%>


<%--                </div>--%>

            </div>
            <!--修改密码面板-->
            <div role="tabpanel" class="tab-pane" id="chan">
                <div class="check-div" style="text-align: center;font-size: 40px">
                    修改密码
                </div>
                <div class="pasPanle">
                    <form class="form-horizontal" method="post" action="${pageContext.request.contextPath}/updatePassword">
                        <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">原密码：</label>
                            <div class="col-xs-5">
                                <input type="text" class="form-control input-sm duiqi" id="sKnot" name="password1" placeholder="" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">新密码：</label>
                            <div class="col-xs-5">
                                <input type="password" class="form-control input-sm duiqi" name="password2" id="sKnot1" placeholder="" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">重复密码：</label>
                            <div class="col-xs-5">
                                <input type="password" class="form-control input-sm duiqi" id="sKnot2" placeholder="" name="password3" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group text-right">
                            <div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;">
                                <button type="submit" class="btn btn-xs btn-green">保存</button>
                            </div>
                        </div>

                        <!-- 出错显示的信息框 -->
                        <div class="alert alert-warning alert-dismissible" role="alert" >
                            <button type="button" class="close" data-dismiss="alert" >
                                <span>&times;</span>
                            </button>
                            <strong>${update_msg}</strong>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    $(function () {
        $(".meun-item").click(function () {
            $(".meun-item").removeClass("meun-item-active");
            $(this).addClass("meun-item-active");
        });

        $(".toggle-btn").click(function () {
            $("#leftMeun").toggleClass("show");
            $("#rightContent").toggleClass("pd0px");
        })
    })
</script>


<style type="text/css">

    body {
        min-width: 100%;
        height: auto
    }


    #wrap {
        min-width: 100%;
        position: absolute;
        background: #eff3f6 bottom;
        min-height: 100%;
        overflow: hidden
    }

    .leftMeun {
        position: absolute;
        box-sizing: border-box;
        width: 200px;
        height: 100%;
        background: #4d5e70 bottom
    }

    .leftMeun > div {
        padding-left: 20px
    }

    #rightContent {
        box-sizing: border-box;
        float: left;
        box-sizing: border-box;
        padding-left: 200px;
        overflow-y: overlay;
        overflow-x: hidden;
        clear: both;
        color: #717592;
        min-width: 100%;
        min-height: 500px
    }

    #logoDiv {
        padding-top: 20px;
        padding-bottom: 20px;
        height: 70px;
        background-color: #354457;
        font-size: 17px;
        color: #fff;
        vertical-align: bottom
    }

    .meun-title {
        color: #828e9a;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 16px;
        font-weight: 700
    }

    .meun-item {
        line-height: 50px;
        height: 50px;
        color: #aab1b7;
        cursor: pointer
    }

    .meun-item a {
        color: #aab1b7;
        display: block
    }

    .meun-item-active a {
        color: #c4c7cc;
        display: block
    }

    .meun-item img {
        padding-right: 8px;
        height: 20px
    }

    .meun-item-active {
        background-color: deepskyblue;
        border-right: 4px solid #647f9d;
        color: #fff
    }

    .check-div {
        height: 70px;
        line-height: 70px;
        *line-height: 60px;
        background-color: #fff;
        padding-left: 30px;
        min-width: 824px !important;
        box-sizing: border-box
    }

    .tab-pane {
        color: #9095ab
    }


    .toggle-btn {
        display: none;
        width: 52px;
        height: 50px;
        font-size: 20px;
        padding: 15px;
        cursor: pointer;
        float: left;
        color: #212121;
        -moz-transition: all .2s ease-out 0s;
        -webkit-transition: all .2s ease-out 0s;
        transition: all .2s ease-out 0s
    }

    .tableHeader {
        height: 35px;
        line-height: 35px;
        font-size: 20px;
        font-weight: bold;

        color: #646987;
        background-color:#4cae4c;
        padding: 0 30px;
        text-align: center;
    }

    .tablebody {
        margin: 10px 20px;
        text-align: center;
        background: #8a6d3b;
    }

    .tablebody .row {
        margin-top: 10px;
        background-color: #f0ad4e;
        height: 80px;
        line-height: 80px;
        font-size: 18px;
    }

    .pd0px {
        padding-left: 200px !important
    }

    /*屏幕宽度小于1123px时的样式*/
    @media(max-width:1123px) {
        #rightContent {
            padding-left: 0
        }

        .tab-pane {
            min-width: 973px
        }

        .leftMeun {
            display: none
        }

        .toggle-btn {
            display: block
        }
    }

    .btn-white {
        background: #fff;
        border: 1px solid #ccc !important;
        font-weight: 400 !important;
        margin-right: 10px
    }

    .btn-green {
        border: 1px solid #ccc !important;
        font-weight: 400 !important;
        margin-right: 10px;
        color: #fff;
        background: #529373
    }

    .duiqi {
        margin-left: -26px !important;
        margin-top: 7px;
        width: 200px !important
    }

    .form-horizontal .form-group {
        margin-right: -100px !important
    }
    .rightlll{
        height: 700px;
        background: #f5e79e;
    }
    .pasPanle{
        width: 420px;
        /*height: 400px;*/
        background: #ffff00;
        color: #000;
        padding: 30px;
        margin: 50px auto;
        border-radius: 20px;

        /*style="padding: 50px 0;margin-top: 50px;background-color: #fff; text-align: right;width: 420px;margin: 50px auto;"*/

    }

</style>
</body>
</html>
